<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" 
  xmlns:h="http://java.sun.com/jsf/html" xmlns:pr="http://java.sun.com/jsf/composite/totororo"
  template="../template_front.xhtml">
  <ui:define name="content">  
	<div id="front" class="home">	
		<div id="pagePanier" class="page-panier">
			<h:form id="formPanier">
				<p:outputPanel autoUpdate="true">
				<h:outputText class="panier-empty" rendered="#{cartController.order.size == 0}" value="Panier vide" />
				<h:outputText styleClass="panier-title" rendered="#{cartController.order.size != 0}" value="Votre panier" />
					<h:dataTable rendered="#{cartController.order.size != 0}" value="#{cartController.order.items}" var="item" rowClasses="produit-pair,produit-impair" columnClasses="photo,qte,title,price,actions">
				       <h:column>	
				           <f:facet name="header" >
				               <h:outputText value=""/>
				           </f:facet>   	       
						  	<div class="image">
								<h:commandLink action="#{homeController.bookDetails}"> 
								    <p:graphicImage value="#{bookController.photo}">
								 		<f:param name="bookId" value="#{item.book.id}" />
								    </p:graphicImage>
								 	<f:param name="bookId" value="#{item.book.id}" />
								</h:commandLink>
							</div>
				       </h:column>
				       <h:column>
				           <f:facet name="header" >
				               <h:outputText value="Qté"/>
				           </f:facet>    
				           <h:outputText id="qte_count" value="#{item.quantity}"/>
				       </h:column>
				        <h:column>
				           <f:facet name="header" >
				               <h:outputText class="title" value="Livre"/>
				           </f:facet>  
				            <p:commandButton icon="ui-icon-search" update="bookPopupDialog" oncomplete="bookDialog.show()" title="View Detail">
	                			<f:setPropertyActionListener value="#{item.book}" target="#{cartController.selectedBook}" />
	            			</p:commandButton>		            
	            			<h:outputText value="#{item.book.title}" style="margin-left:10px" />
	            			<br/>
				   	  		<p:dialog id="bookPopupDialog" header="Détail du livre" widgetVar="bookDialog" modal="true" showEffect="fade">
								<p:outputPanel id="bookDetail" style="text-align:center;" layout="block">
									
									<pr:photo type="book" elementId="#{cartController.selectedBook.id}" size="medium"/>
									<h:panelGrid  columns="2" cellpadding="5">
										<h:outputLabel for="title" value="Titre" />
										<h:outputText id="title" value="#{cartController.selectedBook.title}" />
										
										<h:outputLabel for="category" value="Categorie" />
										<h:outputText id="category" value="#{cartController.selectedBook.category.title}" />
										
										<h:outputLabel for="price" value="Prix" />
										<h:outputText id="price" value="#{cartController.selectedBook.price} €" />
										
									</h:panelGrid>
								</p:outputPanel>
							</p:dialog>   
				       </h:column>
				        <h:column>
				           <f:facet name="header" >
				               <h:outputText value="Prix"/>
				           </f:facet>    
				           <h:outputText value="#{item.book.price}"/>
				       </h:column>
				        <h:column>
				           <f:facet name="header" >
				               <h:outputText value="Actions"/>
				           </f:facet>  
				           <div class="actions-link">  
					           <p:commandLink actionListener="#{cartController.addToCart}" styleClass="ui-icon ui-icon-circle-plus">
								 	<f:param name="bookId" value="#{item.book.id}" update=":form_panier:total_count"/>
					           </p:commandLink>
					           <p:commandLink actionListener="#{cartController.removeOneOfCart}" styleClass="ui-icon ui-icon-circle-minus">
								 	<f:param name="bookId" value="#{item.book.id}" update=":form_panier:total_count"/>
					           </p:commandLink>
					           <div class="clearer"></div>
				           </div>
				       </h:column>
				    </h:dataTable>
				    <p:outputPanel styleClass="total" rendered="#{cartController.order.size != 0}">
						<h:outputText rendered="#{cartController.order.size != 0}" value="Total : "/>			
						<h:outputText id="total_count" rendered="#{cartController.order.size != 0}" value="#{cartController.totalCount}" />
					</p:outputPanel>
					<div class="clearer"></div>						
				    <p:outputPanel layout="block" styleClass="validate" rendered="#{(clientController.loggedIn == true) and (cartController.order.size != 0)}">				
						<p:commandButton action="#{orderController.createOrder}" value="Valider le panier" ajax="false"></p:commandButton>
					</p:outputPanel>											
				    <p:outputPanel layout="block" styleClass="validate" rendered="#{(clientController.loggedIn == false) and (cartController.order.size != 0)}">				
						<h:outputText value="Vous devez être connecté pour valider votre panier : " />
						<pr:popup type="login" link="true" popup="false" />
						<h:outputText value="ou vous inscrire : " />
					    <pr:popup type="register" link="true" popup="false" />
					</p:outputPanel>
				<div class="clearer"></div>
				</p:outputPanel>	           
			</h:form>
		</div>
  	</div>
  </ui:define>
</ui:composition>
